<template>
  <div class="search-bar">
    <div class="search-input-container">
      <div class="search-input-wrapper">
        <va-icon name="search" class="search-icon" />
        <input
          v-model="searchInput"
          class="search-input"
          placeholder="输入你想搜索的内容"
          type="text"
          @keydown.enter="emitSearch"
        />
        <va-icon 
          v-if="searchInput" 
          name="close" 
          class="clear-icon" 
          @click="clearSearch"
        />
      </div>
      <button class="go-button" @click="emitSearch" :disabled="isLoading">
        {{ isLoading ? '搜索中...' : '搜索' }}
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, watch } from 'vue'

const props = defineProps({
  isLoading: {
    type: Boolean,
    default: false
  },
  initialValue: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['search'])

const searchInput = ref(props.initialValue || '')

// 监听initialValue变化，同步更新输入框
watch(() => props.initialValue, (newValue) => {
  searchInput.value = newValue || ''
})

const selectedCategory = ref(null)
const sortBy = ref('trending')

// 这些通常来自API
const categories = [
  { text: '搞笑', value: 'funny' },
  { text: '表情', value: 'reaction' },
  { text: '游戏', value: 'gaming' },
  { text: '动物', value: 'animals' },
  { text: '影视', value: 'movies' }
]

const sortOptions = [
  { text: '热门', value: 'trending' },
  { text: '最新', value: 'newest' },
  { text: '最多赞', value: 'most_liked' },
  { text: '最多浏览', value: 'most_viewed' }
]

function clearSearch() {
  searchInput.value = ''
  emitSearch()
}

function emitSearch() {
  // 禁止在加载状态下触发搜索
  if (props.isLoading) return
  
  emit('search', {
    query: searchInput.value,
    category: selectedCategory.value,
    sort: sortBy.value
  })
}
</script>

<style scoped>
.search-bar {
  margin-bottom: 1.5rem;
  width: 100%;
}

.search-input-container {
  display: flex;
  width: 100%;
  max-width: 100%;
  height: 60px;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
  border: 2px solid var(--color-sailing-teal);
}

.search-input-wrapper {
  display: flex;
  align-items: center;
  flex: 1;
  position: relative;
  padding: 0 16px;
}

.search-icon {
  color: var(--color-sailing-blue);
  font-size: 24px;
  margin-right: 10px;
}

.search-input {
  flex: 1;
  height: 100%;
  border: none;
  outline: none;
  font-size: 16px;
  background: transparent;
  padding: 0;
}

.clear-icon {
  cursor: pointer;
  color: #8795a1;
  margin-left: 4px;
}

.go-button {
  background-color: var(--color-sailing-lime);
  color: #000;
  border: none;
  padding: 0 30px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s;
}

.go-button:hover:not(:disabled) {
  background-color: var(--color-sailing-turquoise);
  color: white;
}

.go-button:disabled {
  background-color: #cccccc;
  color: #666666;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .search-filters {
    flex-direction: column;
    gap: 0.5rem;
  }
}
</style> 